<template>
	<view>
		<!-- 容器box -->
		<view class="box">
			<!-- 项目 box-item-->
			<view class="box-item item1">1</view>
			<view class="box-item item2" >2</view>
			<view class="box-item item3">3</view> 
			<!-- <view class="box-item">4</view>
			<view class="box-item">5</view>
			<view class="box-item">6</view>
			<view class="box-item">7</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.box{
	display: -webkit-flex;
	display: flex;
	height: 400px;
	width: 100%;
	background-color: #C0C0C0;
	/* flex-direction:row;
	flex-wrap:wrap; */
	flex-flow:row wrap;
	justify-content: space-between;
	align-items: space-around;
	
	
	
}
.box-item{
	width: 100px;
	height: 100px;
	background-color: #4CD964;
	border: 1px solid #333333;
}
.item1{
	order:3;
	align-self:flex-end;
}
.item2{
	order:1;
}
.item3{
	order:2;
	flex-grow:1;
}
</style>
